<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue-2.6.12.js"></script>
    <script src="./js/vue-router-3.4.3.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用路由 -->
        <div>
            <router-link to="/a">去a路由</router-link>
            <router-link to="/b">去b路由</router-link>
        </div>
        <div>
            <router-view></router-view>
        </div>
    </div>
    <script>
        let myA = {
            data() {
                return {
                    id:null,
                    username:"",
                }
            },
            template: `<div>A组件-{{id}}-{{username}}</div>`,
            // 组件内守卫
            beforeRouteEnter (to, from, next) {
                // this 指向window
                console.log(this,'enter');
                next()
            },
            beforeRouteLeave (to, from, next) {
                console.log(this,'leave');
            },
            beforeRouteUpdate (to, from, next) {
                console.log(this,'update');
            }
        };
        let myB = {
            template: `<div>B组件</div>`,
        };
        let routes = [
            {
                path: '/a',
                component: myA,
                // 可以在路由配置上直接定义beforeEnter守卫，该守卫与全局前置守卫参数一样
                // beforeEnter(to, from, next){
                //     console.log(to,from,'路由独享守卫');
                //     next();
                // }
            },
            {
                path: '/b',
                component: myB,
                // 路由名称
                name:'bRoute'
            }
        ];
        let router = new VueRouter({
            routes,
            // 切换路由模式
            // mode:'history'
            mode:'hash'
        });
        // 全局守卫
        // 全局前置守卫
        // router.beforeEach((to, from, next) => {
        //     // to要去的页面 from从哪里来 next放行 
        //     console.log(to,from,'全局前置守卫');
        //     next();
        // });
        // // 全局后置守卫
        // router.afterEach((to, from,next) => {
        //     console.log(to,from,'全局后置守卫');
        // });
        // 参数说明 to：即将要进入的路由对象 from：当前导航正要离开的路由对象
        // next function 一定要调用该方法来触发后置守卫
        new Vue({
            el: "#app",
            router,
            data: {},
            methods: {
                
            },
        })
    </script>
</body>

</html>